/* 
  @keyframes 动画名称 {
    from|0% {
      动画开始时的样式 
    }
    percent {
      动画执行到一半时的样式
    }
    to|100% {
      动画结束时的样式 
    }
  }

  执行动画：
      animation: 动画名称 动画时长 动画曲线 何时开始 播放次数 是否反向 动画结束后的状态
      动画曲线:ease 默认值，动画低速开始，然后加快，然后慢下来
              linear 动画匀速
              ease-in 加速
              ease-out 减速
              ease-in-out 先加速后减速
              steps(2) 动画分两步完成
      何时开始:2s 2秒后开始执行动画
      播放次数:1 播放1次
      播放次数:infinite 无限次
*/
@keyframes myAnim {
  0% {
    width: 200px;
    background-color: red;
  }
  50% {
    width: 400px;
    background-color: green;
  }
  100% {
    width: 200px;
    background-color: red;
  }
}
div {
  width: 200px;
  height: 200px;
  background-color: red;
  animation: myAnim 4s linear 0s 3 alternate forwards;
}
/* div:hover {
  animation: myAnim 2s linear 0s 3 alternate forwards;
} */